<template>
<div id="find">
    <div class="section category-section">
        <div>
            <div class="tab-bar-box">
                <div class="tab-bar">
                    <ul class="tab-bar-ul">
                        <li class="tab-bar-li on">关注</li>
                        <li class="tab-bar-li" @click="foodlist()">食谱</li>
                        <li class="tab-bar-li" @click="recommend()">推荐</li>
                        <li class="tab-bar-li" @click="makeup()">时尚美妆</li>
                        <li class="tab-bar-li" @click="life()">生活</li>
                    </ul>
                </div>   
            </div>
            <div class="tab-content">
                  <div class="content-item">
                    <div>
                      <div class="scroll-box scrollLoad-box">
                        <div>
                          <div class="faxian-list">
                            <div class="faxian-list-item">
                              <div class="faxian-store-box">
                                <div class="faxian-list-item-store">
                                  <img :src="assets.suguologo" alt="" class="item-store-logo">
                                  <span class="item-title-box">
                                    <strong class="item-store-title">南京苏果升州路生活超市</strong>
                                    <i class="item-store-sub-title">{{nowTime}}</i>
                                  </span>
                                </div>
                              </div>
                              <div class="faxian-list-item-desc-10">【今日推荐】精挑细选了你喜欢的商品，你想要的全在这里啦~</div>
                              <div class="faxian-list-item-imgs-box">
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.milk" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥3</span>
                                </div>
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.xyf" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥9.9</span>
                                </div>
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.rice" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥85.9</span>
                                </div>
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.xyf" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥9.9</span>
                                </div>
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.rice" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥85.9</span>
                                </div>
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.milk" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥3</span>
                                </div>
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.milk" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥3</span>
                                </div>
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.rice" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥85.9</span>
                                </div>
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.xyf" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥9.9</span>
                                </div>
                              </div>
                            </div>
                            <div class="faxian-list-item">
                              <div class="faxian-store-box">
                                <div class="faxian-list-item-store">
                                  <img :src="assets.guolinju" alt="" class="item-store-logo">
                                  <span class="item-title-box">
                                    <strong class="item-store-title">果邻居-小郭水果店</strong>
                                    <i class="item-store-sub-title">{{nowTime}}</i>
                                  </span>
                                </div>
                              </div>
                              <div class="faxian-list-item-desc-10">【每天都在这里默默等你】精选品质商品，只为你进店后的满意微笑~</div>
                              <div class="faxian-list-item-imgs-box">
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.watermalen" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥16.8</span>
                                </div>
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.watermalen" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥16.8</span>
                                </div>
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.shuiguo" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥9.5</span>
                                </div>
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.shuiguo" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥9.5</span>
                                </div>
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.shuiguo" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥9.5</span>
                                </div>
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.watermalen" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥16.8</span>
                                </div>
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.shuiguo" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥9.5</span>
                                </div>
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.watermalen" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥16.8</span>
                                </div>
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.shuiguo" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥9.5</span>
                                </div>
                              </div>
                            </div>
                            <div class="faxian-list-item">
                              <div class="faxian-store-box">
                                <div class="faxian-list-item-store">
                                  <img :src="assets.jdlogo" alt="" class="item-store-logo">
                                  <span class="item-title-box">
                                    <strong class="item-store-title">京东到家</strong>
                                    <i class="item-store-sub-title">万千商品1小时达</i>
                                  </span>
                                </div>
                              </div>
                              <div class="faxian-list-item-desc-10">邀请好友，分享有礼</div>
                              <div class="faxian-list-item-imgs-box">
                                <div class="faxian-list-item-imgs">
                                  <img :src="assets.hongbao" alt="" class="faxian-list-item-imgs-pic">
                                </div>
                                
                              </div>
                            </div>
                          </div>
                          <div>
                            <p class="commonTitle20">附近热门动态</p>
                            <div class="faxian-list">
                              <div class="faxian-list-item">
                                <div class="faxian-store-box">
                                  <div class="faxian-list-item-store">
                                    <img :src="assets.cake" alt="" class="item-store-logo">
                                    <span class="item-title-box">
                                      <strong class="item-store-title">蜜汀蛋糕-南京店</strong>
                                      <i class="item-store-sub-title">4分钟前</i>
                                    </span>
                                  </div>
                                  <button class="store-focus-btn" type="button">关注</button>
                                </div>
                                <div class="faxian-list-item-desc-10">告诉自己：今天，是最好的一天。不必为昨日遗憾，带着昨天的烦恼生活，只会让自己负重前行。早上好！</div>
                                <div class="faxian-list-item-imgs-box">
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.cake1" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥349</span>
                                  <span class="promotion-tags promotion-tags-full  promotion-tag" style="background: -webkit-linear-gradient(left top, rgb(85, 216, 94), rgb(72, 193, 81));">
                                    <span>满10减5</span>
                                  </span>
                                </div>
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.cake2" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥399</span>
                                </div>
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.cake1" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥349</span>
                                  <span class="promotion-tags promotion-tags-full  promotion-tag" style="background: -webkit-linear-gradient(left top, rgb(85, 216, 94), rgb(72, 193, 81));">
                                    <span>满10减5</span>
                                  </span>
                                </div>
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.cake2" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥399</span>
                                </div>
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.cake1" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥349</span>
                                  <span class="promotion-tags promotion-tags-full  promotion-tag" style="background: -webkit-linear-gradient(left top, rgb(85, 216, 94), rgb(72, 193, 81));">
                                    <span>满10减5</span>
                                  </span>
                                </div>
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.cake2" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥399</span>
                                </div>
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.cake2" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥399</span>
                                </div>
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.cake2" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥399</span>
                                </div>
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.cake1" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥349</span>
                                  <span class="promotion-tags promotion-tags-full  promotion-tag" style="background: -webkit-linear-gradient(left top, rgb(85, 216, 94), rgb(72, 193, 81));">
                                    <span>满10减5</span>
                                  </span>
                                </div>
                              </div>
                              </div>
                              <div class="faxian-list-item">
                                <div class="faxian-store-box">
                                  <div class="faxian-list-item-store">
                                    <img :src="assets.flowerstore" alt="" class="item-store-logo">
                                    <span class="item-title-box">
                                      <strong class="item-store-title">花佰様-南京店</strong>
                                      <i class="item-store-sub-title">14分钟前</i>
                                    </span>
                                  </div>
                                  <button class="store-focus-btn" type="button">关注</button>
                                </div>
                                <div class="faxian-list-item-desc-10">你好七月，愿你浇灌梦想，绽放光彩，释放活力，彰显魅力，不负年华，不负梦想</div>
                                <div class="faxian-list-item-imgs-box">
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.flower1" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥158</span>
                                  <span class="promotion-tags promotion-tags-full  promotion-tag" style="background: -webkit-linear-gradient(left top, rgb(255, 200, 55), rgb(255, 150, 51));">
                                    <span>直降4.97折</span>
                                  </span>
                                </div>
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.flower2" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥298</span>
                                </div>
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.flower2" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥298</span>
                                  <span class="promotion-tags promotion-tags-full  promotion-tag" style="background: -webkit-linear-gradient(left top, rgb(255, 200, 55), rgb(255, 150, 51));">
                                    <span>直降4.97折</span>
                                  </span>
                                </div>
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.flower2" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥298</span>
                                </div>
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.flower1" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥158</span>
                                  <span class="promotion-tags promotion-tags-full  promotion-tag" style="background: -webkit-linear-gradient(left top, rgb(255, 200, 55), rgb(255, 150, 51));">
                                    <span>直降4.97折</span>
                                  </span>
                                </div>
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.flower1" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥158</span>
                                </div>
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.flower2" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥298</span>
                                </div>
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.flower1" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥158</span>
                                </div>
                                <div class="faxian-goodslist-link">
                                  <img :src="assets.flower2" alt="" class="faxian-goodslist-img">
                                  <span class="faxian-list-item-price">￥298</span>
                                  <span class="promotion-tags promotion-tags-full  promotion-tag" style="background: -webkit-linear-gradient(left top, rgb(255, 200, 55), rgb(255, 150, 51));">
                                    <span>直降4.97折</span>
                                  </span>
                                </div>
                              </div>
                              </div>
                              <div class="faxian-list-item">
                                <div class="faxian-store-box">
                                  <div class="faxian-list-item-store">
                                    <img :src="assets.walmart" alt="" class="item-store-logo">
                                    <span class="item-title-box">
                                      <strong class="item-store-title">沃尔玛-秦淮店				</strong>
                                      <i class="item-store-sub-title">2小时前</i>
                                    </span>
                                  </div>
                                  <button class="store-focus-btn" type="button">关注</button>
                                </div>
                                <div class="faxian-list-item-desc-10">想免运？就来沃尔玛啊！ 任意一单含果蔬肉蛋满39元，即享整单免基础运费！戳下图进店领券购起来~</div>
                                <div class="faxian-list-item-imgs-box">
                                  <div class="faxian-list-item-imgs">
                                    <img :src="assets.walmart1" alt="" class="faxian-list-item-imgs-pic">
                                  </div>
                              </div>
                              </div>
                            </div>
                          </div>
                          <div style="font-size: 16px;line-height: 15px;color: #666;text-align: center;">数据加载中，请稍后</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>



            <div class="navigation footer-nav ipx-pad">
                <span class="navigation-item" @click="index()">
                <i class="iconfont1 icon-home"></i>
                <span class="navigation-item-label">首页</span>
                </span>
                <span class="navigation-item">
                 <i class="iconfont2 icon-home"></i>
                <span class="navigation-item-label nav-item-label1">发现</span>
                </span>
                <span class="navigation-item" @click="buy()">
                 <i class="iconfont3 icon-home"></i>
                <span class="navigation-item-label">购物车</span>
                </span>
                <span class="navigation-item" @click="list()">
                 <i class="iconfont4 icon-home"></i>
                <span class="navigation-item-label">订单</span>
                </span>
                <span class="navigation-item" @click="mine()">
                 <i class="iconfont5 icon-home"></i>
                <span class="navigation-item-label">我的</span>
                </span>
            </div>
        </div>
    </div>








    
</div>
</template>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: 400;
  font-style: normal;
}
#find {
  .category-section {
    padding-bottom: 51px;
    .tab-bar-box {
      height: 50px;
      overflow-y: hidden;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 501;
      .tab-bar {
        text-align: center;
        white-space: nowrap;
        width: 100%;
        height: 60px;
        line-height: 50px;
        background-color: #fff;
        overflow-x: auto;
        .tab-bar-ul {
          height: 50px;
          display: inline-block;
          text-align: center;
          .tab-bar-li {
            font-size: 16px;
            color: #333;
            padding: 15px 13px;
            height: 20px;
            line-height: 20px;
            display: inline-block;
            position: relative;
          }
          .on {
            color: #47b34f;
          }
          .on:after {
            content: "";
            height: 3px;
            width: 20px;
            background-color: #47b34f;
            position: absolute;
            border-radius: 5px;
            bottom: 7px;
            left: 50%;
            margin-left: -10px;
          }
        }
      }
    }
    .tab-content {
      padding-top: 50px;
      .content-item {
        height: 100%;
        .scroll-box {
          padding-bottom: 50px;
          overflow-x: auto;
          .faxian-list {
            padding: 0 10px;
            .faxian-list-item {
              position: relative;
              margin: 10px 0;
              background-color: #fff;
              padding: 16px 10px;
              border-radius: 8px;
              .faxian-store-box {
                display: flex;
                align-items: center;
                justify-content: space-between;
                .faxian-list-item-store {
                  display: flex;
                  overflow: hidden;
                  flex: 1 1;
                  flex-grow: 1;
                  flex-shrink: 1;
                  flex-basis: 0%;
                  flex-direction: row;
                  position: relative;
                  height: 42px;
                  .item-store-logo {
                    width: 40px;
                    height: 40px;
                    border: 1px solid rgba(0, 0, 0, 0.08);
                    border-radius: 40px;
                  }
                  .item-title-box {
                    flex-direction: column;
                    padding-left: 10px;
                    display: flex;
                    flex: 1 1;
                    flex-grow: 1;
                    flex-shrink: 1;
                    flex-basis: 0%;
                    .item-store-title {
                      display: block;
                      overflow: hidden;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                      height: 20px;
                      font-size: 14px;
                      line-height: 20px;
                      color: #333;
                    }
                    .item-store-sub-title {
                      height: 15px;
                      font-size: 12px;
                      line-height: 15px;
                      color: #999;
                      margin-top: 3px;
                      display: block;
                      overflow: hidden;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                    }
                  }
                }
                .store-focus-btn {
                  background: #47b34f;
                  width: 66px;
                  height: 26px;
                  font-size: 12px;
                  color: #fff;
                  line-height: 23px;
                  text-align: center;
                  border-radius: 13px;
                }
              }
              .faxian-list-item-desc-10 {
                white-space: pre-wrap;
                -webkit-line-clamp: 10;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                margin-top: 5px;
                line-height: 24px;
                font-size: 16px;
                color: #333;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              .faxian-list-item-imgs-box {
                display: block;
                margin-top: 10px;
                .faxian-list-item-imgs {
                  width: 100%;
                  border-radius: 6px;
                  display: block;
                  margin-bottom: 2px;
                  .faxian-list-item-imgs-pic {
                    width: 100%;
                    border-radius: 6px;
                  }
                }
                .faxian-goodslist-link {
                  display: inline-block;
                  position: relative;
                  width: calc((100vw - 52px) / 3);
                  height: calc((100vw - 52px) / 3);
                  margin-right: 2px;
                  border: 1px solid #f8f8f8;
                  border-radius: 4px;
                  overflow: hidden;
                  .faxian-goodslist-img {
                    display: block;
                    width: 100%;
                    height: 100%;
                  }
                  .faxian-list-item-price {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    height: 26px;
                    background: hsla(0, 0%, 100%, 0.9);
                    line-height: 26px;
                    padding-left: 5px;
                    font-size: 14px;
                    color: #ff5757;
                  }
                  .promotion-tags {
                    position: absolute;
                    top: 0;
                    left: 0;
                    color: #fff;
                    font-size: 10px;
                    width: auto;
                    height: 14px;
                    line-height: 14px;
                    text-align: center;
                    z-index: 1;
                    margin-right: 3px;
                    display: inline-block;
                    padding: 0 3px;
                    border-radius: 4px 1px;
                    box-sizing: border-box;
                  }
                }
              }
            }
          }
          .commonTitle20 {
            font-size: 20px;
            line-height: 24px;
            margin: 30px 10px 15px;
            color: #333;
            font-weight: 700;
          }
        }
      }
    }

    .footer-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      font-size: 12px;
      z-index: 1001;
      align-items: center;
      display: flex;
    }
    .navigation {
      align-items: center;
      background-image: linear-gradient(
        180deg,
        #e8e8e8,
        #e8e8e8 50%,
        transparent 0
      );
      background-size: 100% 1px;
      background-repeat: no-repeat;
      background-position: 0 0;
      background-color: #fff;
      height: 50px;
      .navigation-item {
        display: inline-block;
        width: 75px;
        position: relative;
        color: #555;
        flex: 1 1;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0%;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        text-align: center;
        // color: #39ac69;
        display: flex;
        .iconfont1 {
          background: url("http://127.0.0.1:8088/upload/nav6.fe8f6378.png")
            no-repeat;
          height: 30px;
          background-size: 24px auto;
          background-position: center 0;
        }
        .iconfont2 {
          background: url("http://127.0.0.1:8088/upload/nav6.fe8f6378.png")
            no-repeat;
          height: 30px;
          background-size: 24px auto;
          background-position: center -651px;
        }
        .iconfont3 {
          background: url("http://127.0.0.1:8088/upload/nav6.fe8f6378.png")
            no-repeat;
          height: 30px;
          background-size: 24px auto;
          background-position: center -100px;
        }
        .iconfont4 {
          background: url("http://127.0.0.1:8088/upload/nav6.fe8f6378.png")
            no-repeat;
          height: 30px;
          background-size: 24px auto;
          background-position: center -200px;
        }
        .iconfont5 {
          background: url("http://127.0.0.1:8088/upload/nav6.fe8f6378.png")
            no-repeat;
          height: 30px;
          background-size: 24px auto;
          background-position: center -300px;
        }
        .navigation-item-label {
          display: block;
          height: 20px;
          line-height: 17px;
        }
        .nav-item-label1 {
          color: #39ac69;
        }
      }
    }
  }
}
</style>

<script>
export default {
  data() {
    return {};
  },
  created() {
    this.nowTimes();
  },
  methods: {
    timeFormate(timeStamp) {
      let year = new Date(timeStamp).getFullYear();
      let month =
        new Date(timeStamp).getMonth() + 1 < 10
          ? "0" + (new Date(timeStamp).getMonth() + 1)
          : new Date(timeStamp).getMonth() + 1;
      let date =
        new Date(timeStamp).getDate() < 10
          ? "0" + new Date(timeStamp).getDate()
          : new Date(timeStamp).getDate();
      this.nowTime = year + "-" + month + "-" + date;
    },
    nowTimes() {
      this.timeFormate(new Date());
      // setInterval(this.nowTimes,30*1000);
    },
    foodlist() {
      this.$router.push({
        name: "foodlist"
      });
    },
    recommend() {
      this.$router.push({
        name: "recommend"
      });
    },
    makeup() {
      this.$router.push({
        name: "makeup"
      });
    },
    index() {
      this.$router.push({
        name: "index"
      });
    },
    life() {
      this.$router.push({
        name: "life"
      });
    },
    buy() {
      this.$router.push({
        name: "buy"
      });
    },
    list() {
      this.$router.push({
        name: "list"
      });
    },
    mine() {
      this.$router.push({
        name: "mine"
      });
    }
  }
};
</script>


